<template>
	<!-- 首页【消息】 -->
	<view class="pd-30">
		<my-switch-navbar :activeTab.sync="activeTab" :tabName="tabName"></my-switch-navbar>
		<view class="container">
			<uni-swipe-action>
				<uni-swipe-action-item class="noticeSwipe" @click="delNotice($event, item, index)" v-for="(item,index) in list" :key="item.unid" :right-options="options">
					<view class="notice" @click="view(item)">
						<view class="content">
							<view class="title">
								<view class="dot" v-show="!item.isRead"></view>
								<text class="text-ellipsis">{{ item.name }}</text>
							</view>
							<view class="time">
								<image src="../../static/icon/clock.png" mode=""></image>
								<text>发布时间：{{ item.createtime }}</text>
							</view>
						</view>
						<my-icon name="bd-next" style="color:#ccc"></my-icon>
						<!-- <uni-icons type="arrowright"></uni-icons> -->
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>
		<u-loadmore v-show="isShowLoadMore" icon-type="flower" bg-color="#FFFFFF" :status="status" @loadmore="getPageData()" :margin-top="20" />
		<my-empty v-if="isEmpty"></my-empty>

	</view>
</template>

<script>

export default {
	data() {
		return {
			activeTab: 0,
			tabName: ['考试消息', '系统通知'],
			options: [
				{
					text: '删除',
					style: {
						backgroundColor: '#ef4c3a'
					}
				}
			],
			noticeData: {
				type: [1, 0],
				list: [[], []],
				isLastPage: [false, false],
				status: ['loadmore', 'loadmore'],
				pageNo: [1, 1]
			},
		};
	},
	watch: {
		activeTab(n) {
			this.list.length === 0 && this.getPageData();
		}
	},
	onReachBottom() {
		!this.isLastPage && this.getPageData();
	},
	computed: {
		list: {
			set(v) {
				this.setData(this.noticeData.list, v);
			},
			get() {
				return this.getData(this.noticeData.list);
			}
		},
		type() {
			return this.getData(this.noticeData.type);
		},
		isLastPage: {
			set(v) {
				this.setData(this.noticeData.isLastPage, v);
			},
			get() {
				return this.getData(this.noticeData.isLastPage);
			}
		},
		status: {
			set(v) {
				this.setData(this.noticeData.status, v);
			},
			get() {
				return this.getData(this.noticeData.status);
			}
		},
		pageNo: {
			set(v) {
				this.setData(this.noticeData.pageNo, v);
			},
			get() {
				return this.getData(this.noticeData.pageNo);
			}
		}
	},
	onLoad() {
		this.init();
	},
	methods: {
		init() {
			this.status = 'loadmore';
			this.pageNo = 1;
			this.list = [];
			this.isLastPage = false;
			return this.getPageData();
		},
		getPageData() {
			this.status = 'loading';
			const { type, pageNo } = this;
			return new Promise((resolve, reject) => {
				this.request
					.post('/app/mine/getNoticeListVO', { type, pageNo })
					.then(res => {
						const { list, isLastPage } = res;
						this.list = this.list.concat(list);
						if (isLastPage) {
							this.isLastPage = isLastPage;
							this.status = 'nomore';
						} else this.pageNo++;
						resolve();
					})
					.catch(reject)
					.finally(() => {
						this.status !== 'nomore' && (this.status = 'loadmore');
					});
			});
		},
		view(notice) {
			const { unid } = notice;
			uni.showLoading({
				mask: true,
				title: '加载中...'
			});
			let  infoTit=this.activeTab==0?'消息详情':'通知详情'
			this.request
				.get('/app/mine/getNoticeDetailVO', {
					unid
				})
				.then(res => {
					uni.hideLoading();
					uni.navigateTo({
						url: `./info/info?title=${infoTit}&info=${JSON.stringify(res)}`,
						success: () => {
							!notice.isRead && this.updateUnreadNoticeCount(this.vuex_unread_notice_count - 1);
							notice.isRead = true;
						}
					});
				});
		},
		setData(target, val) {
			this.$set(target, this.activeTab, val);
		},
		getData(target) {
			return target[this.activeTab];
		},
		delNotice(e, { unid },index) {
			// 删除通知
			this.request
				.get('/app/mine/delNotice', {
					unid
				})
				.then(res => {
					this.list.splice(index, 1);
					uni.showToast({
						icon: 'none',
						title: '删除成功！'
					});
				});
		}
	}
};
</script>
<style>
page {
	background-color: #ffffff;
}
</style>
<style lang="scss">
.container {
	display: flex;
	flex-direction: column;
}
.notice {
	display: flex;
	align-items: center;
	position: relative;
	height: 150upx;
	flex: 1;
	padding: 0 30upx;
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-evenly;
		height: 70%;
		flex: 1;
	}
	.title {
		display: flex;
		align-items: center;
		font-size: 32upx;
		font-weight: 400;
		color: #363940;
		text {
			width: 550upx;
		}
	}
	.time {
		font-size: 26upx;
		font-weight: 400;
		color: #a6a6a6;
		display: flex;
		align-items: center;
		image {
			width: 28upx;
			height: 28upx;
			margin-right: 16upx;
		}
	}
}
.noticeSwipe:last-child{
	/deep/.uni-swipe_box::before{
		display: none!important;
	}
}
/deep/.noticeSwipe .uni-swipe_box{
	position: relative;
}
/deep/.uni-swipe_box::before{
	content: '';
	height: 1px;
	background-color: #ebebeb;
	position: absolute;
	z-index: 1;
	bottom: 0;
	left: 30upx;
	right: 30upx;
}
.dot {
	width: 16upx;
	height: 16upx;
	margin-right: 16upx;
	background: #f45c4b;
	border-radius: 8upx;
}
</style>
